<template>
  <view class="main">
    <view class="top-box">
      <view class="top-view">
        <view class="top-left">
          <text class="top-title">今日销售额(元)</text>
          <text class="top-num">1,132,628.92</text>
          <text class="top-detail">上月同期(元) 1,203,846.80,增长12.82%</text>
          <text class="top-detail">本期门店32家，2家无销售;同期28家，0家无销售</text>
        </view>
        <view class="top-right">
          <text>详情 ></text>
        </view>
      </view>
      <view class="top-bottom">
      </view>
    </view>
    <view class="container">
      <eui-card>
        <eui-data-statistics :dataList="dataList1" />
        <view class="line-view" />
        <eui-data-statistics :dataList="dataList2" />
        <view class="line-view" />
        <eui-data-statistics :dataList="dataList3" />
      </eui-card>
      <eui-card title="门店/业态/区域占比">
        <template v-slot:extra>
          <view class="extra-view">
            <text class="extra-text">销售额</text>
          </view>
        </template>
        <view class="pie-view">
          <eui-echarts :chartStyle="chartStyle2" :option="option2"></eui-echarts>
        </view>
      </eui-card>
      <eui-card title="近30天销售额变化">
        <template v-slot:extra>
          <view class="extra-view">
            <text class="extra-text">销售额</text>
          </view>
        </template>
        <view class="eChart-line-view">
          <eui-echarts :chartStyle="chartStyle" :option="option"></eui-echarts>
        </view>
      </eui-card>
      <eui-card title="近30天销售额变化">
        <template v-slot:extra>
          <view class="extra-view">
            <text class="extra-text">top3</text>
          </view>
        </template>
        <view class="line-view" />
        <eui-data-statistics :dataList="dataList4" />
        <view class="line-view" />
        <eui-data-statistics :dataList="dataList4" />
        <view class="line-view" />
        <eui-data-statistics :dataList="dataList4" />
      </eui-card>
    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  data() {
    return{
      // 图表类型和数据
      option: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          data: ['金额'],
          bottom: 0,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        series: [
          {
            name: '金额',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      },
      option2: {
        legend: {
          right: '5%',
          top: 'middle',
          align: 'auto',
          orient: 'vertical',
          itemGap: 20
        },
        series: [
          {
            right: '30%',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 25, name: '大卖场' },
              { value: 30, name: '购物中心' },
              { value: 30, name: '便利店' },
              { value: 10, name: '标超' },
              { value: 5, name: '加盟店' }
            ]
          }
        ]
      },
      // 饼图数据
      pieList: [
        { value: 25, name: '大卖场' },
        { value: 30, name: '购物中心' },
        { value: 30, name: '便利店' },
        { value: 10, name: '标超' },
        { value: 5, name: '加盟店' }
      ],
      // 图表样式
      chartStyle: 'width: 700rpx; height: 450rpx',
      chartStyle2: 'width: 700rpx; height: 450rpx',
      // 卡片数据
      dataList1: [
        {
          mode: 'small',
          title: '毛利额(元)',
          value: 123283.86,
          colSpan: 9,
          valueUnit: '',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#888888', fontSize: '14px', lineHeight: '33rpx', fontWeight: 400 },
          largeValueStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
          smallValueStyle: { color: '#000000', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        },
        {
          mode: 'small',
          title: '毛利率',
          value: 11.66,
          colSpan: 9,
          valueUnit: '%',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#888888', fontSize: '14px', lineHeight: '33rpx', fontWeight: 400 },
          largeValueStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
          smallValueStyle: { color: '#000000', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        },
        {
          mode: 'small',
          title: '来客/客单 (元)',
          value: 16866,
          colSpan: 6,
          valueUnit: '',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#888888', fontSize: '14px', lineHeight: '33rpx', fontWeight: 400 },
          largeValueStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
          smallValueStyle: { color: '#000000', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        }
      ],
      dataList2: [
        {
          mode: 'small',
          title: '环比(%)',
          colSpan: 24,
          valueUnit: '',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#000000', fontSize: '28rpx', lineHeight: '40rpx', fontWeight: 400 },
        },
        {
          mode: 'small',
          title: '130, 567.86',
          value: 1.53,
          colSpan: 9,
          valueUnit: '',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#888888', fontSize: '14px', lineHeight: '33rpx', fontWeight: 400 },
          largeValueStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
          smallValueStyle: { color: '#000000', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        },
        {
          mode: 'small',
          title: '12.68%',
          value: -7.73,
          colSpan: 9,
          valueUnit: '',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#888888', fontSize: '14px', lineHeight: '33rpx', fontWeight: 400 },
          largeValueStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
          smallValueStyle: { color: '#000000', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        },
        {
          mode: 'small',
          title: '3628/237.00',
          value: 22.18,
          colSpan: 6,
          valueUnit: '',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#888888', fontSize: '14px', lineHeight: '33rpx', fontWeight: 400 },
          largeValueStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
          smallValueStyle: { color: '#000000', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        }
      ],
      dataList3: [
        {
          mode: 'small',
          title: '同比(%)',
          colSpan: 24,
          valueUnit: '',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#000000', fontSize: '28rpx', lineHeight: '40rpx', fontWeight: 400 },
        },
        {
          mode: 'small',
          title: '130, 567.86',
          value: 1.53,
          colSpan: 9,
          valueUnit: '',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#888888', fontSize: '14px', lineHeight: '33rpx', fontWeight: 400 },
          largeValueStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
          smallValueStyle: { color: '#000000', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        },
        {
          mode: 'small',
          title: '12.68%',
          value: -7.73,
          colSpan: 9,
          valueUnit: '',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#888888', fontSize: '14px', lineHeight: '33rpx', fontWeight: 400 },
          largeValueStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
          smallValueStyle: { color: '#000000', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        },
        {
          mode: 'small',
          title: '3628/237.00',
          value: 22.18,
          colSpan: 6,
          valueUnit: '',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#888888', fontSize: '14px', lineHeight: '33rpx', fontWeight: 400 },
          largeValueStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
          smallValueStyle: { color: '#000000', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        }
      ],
      dataList4: [
        {
          mode: 'small',
          title: '[10102]昂捷济南店 销售额(元)',
          value: 123283.86,
          colSpan: 18,
          valueUnit: '',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#000000', fontSize: '28rpx', lineHeight: '40rpx', fontWeight: 400 },
          largeValueStyle: { color: '#02B7E6', fontSize: '40rpx', lineHeight: '47rpx', fontWeight: 500 },
          smallValueStyle: { color: '#02B7E6', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        },
        {
          mode: 'small',
          title: '来客/客单 (元)',
          value: 33.33,
          colSpan: 6,
          valueUnit: '%',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#888888', fontSize: '24rpx', lineHeight: '33rpx', fontWeight: 400 },
          largeValueStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
          smallValueStyle: { color: '#000000', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        },
        {
          mode: 'small',
          title: '毛利额(元)',
          value: 123283.86,
          colSpan: 9,
          valueUnit: '',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#888888', fontSize: '14px', lineHeight: '33rpx', fontWeight: 400 },
          largeValueStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
          smallValueStyle: { color: '#000000', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        },
        {
          mode: 'small',
          title: '毛利率',
          value: 11.66,
          colSpan: 9,
          valueUnit: '%',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#888888', fontSize: '14px', lineHeight: '33rpx', fontWeight: 400 },
          largeValueStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
          smallValueStyle: { color: '#000000', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        },
        {
          mode: 'small',
          title: '来客/客单 (元)',
          value: 16866,
          colSpan: 6,
          valueUnit: '',
          icon: '',
          iconColor: '',
          titleStyle: { color: '#888888', fontSize: '14px', lineHeight: '33rpx', fontWeight: 400 },
          largeValueStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
          smallValueStyle: { color: '#000000', fontSize: '22rpx', lineHeight: '40rpx', fontWeight: 500 },
          unitStyle: { color: '#000000', fontSize: '34rpx', lineHeight: '40rpx', fontWeight: 500 },
        }
      ],
    }
  },
  methods: {
    // 按钮点击事件
    getDataItemByName(localValue) {
      console.log('localValue: ', localValue);
      return {
        value: 1,
        total: 10,
      }
    },
  }
}
</script>

<style scoped>
.main {
  background-color: #F4F4F4;
  display: flex;
  padding: 0;
  width: 100%;
  height: 3000rpx;
  flex-direction: column;
  justify-content: flex-start;
}
.top-box {
  display: flex;
  flex-direction: column;
  width: 750rpx;
  height: 384rpx;
  background: linear-gradient( 180deg, #02B7E6 0%, rgba(54,169,243,0) 100%), linear-gradient( 180deg, #02B7E6 0%, #36A9F3 100%);
}
.top-view {
  display: flex;
  flex: 1;
  flex-direction: row;
  padding: 28rpx;
}
.top-bottom {
  width: 750rpx;
  height: 100rpx;
  background: linear-gradient( 180deg, rgba(242,242,242,0) 0%, #F2F2F2 100%);
}
.top-left {
  display: flex;
  flex-direction: column;
}
.top-right {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #FFFFFF;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.top-title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 30rpx;
  color: #FFFFFF;
  line-height: 42rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.top-num {
  font-family: Roboto, Roboto;
  font-weight: 500;
  font-size: 72rpx;
  color: #FFFFFF;
  line-height: 85rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin: 12rpx 0 28rpx 0;
}
.top-detail {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #FFFFFF;
  line-height: 37rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 305rpx;
  left: 0;
}
.line-view {
  width: 682rpx;
  height: 1rpx;
  background: #EEEEEE;
  border-radius: 10rpx 10rpx 0rpx 0rpx;
  margin: 20rpx 0 20rpx 0rpx;
}
.pie-view {
  /*width: 710rpx;*/
  display: flex;
  height: 450rpx;
  width: 100%;
  justify-content: center;
  background: #FFFFFF;
}
.eChart-line-view {
  display: flex;
  height: 450rpx;
  width: 100%;
  justify-content: center;
  background: #FFFFFF;
}
.extra-view {
   display: flex;
   width: 134rpx;
   height: 48rpx;
   background: #F8F8F8;
   border-radius: 4rpx;
  justify-content: center;
  align-items: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #666666;
  line-height: 37rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
 }
</style>
